<script setup>
    import analyse from './analyse.vue'
    import login from './login.vue'
    import setting from './setting.vue'
    import banner from './banner.vue'
    import dbsetting from './dbsetting.vue'
    import tasksetting from './tasksetting.vue'
    import joblog from './joblog.vue'
    import user from './user.vue'
    import cdc from './cdc.vue'
    import search from './search.vue'
    import { ref } from 'vue';

    const isLogin = ref(false)
    const tabIndex = ref(0)
     
    function loginHandle() {
        isLogin.value = true
    }
    function logoutHandle() {
        isLogin.value = false
    }
    function tabHandle(e) {
        tabIndex.value = e
    }


</script>
<template>
  <banner @tab="tabHandle" :isLogin="isLogin" @logout="logoutHandle"></banner>
  <div v-if="!isLogin">
     <login @login="loginHandle"></login>
    </div>
  <div v-else class="mt-4">
    <analyse v-if="tabIndex===0"></analyse>
    <setting v-if="tabIndex===1"></setting>
    <tasksetting v-if="tabIndex===2"></tasksetting>
    <dbsetting v-if="tabIndex===3"></dbsetting>
    <joblog v-if="tabIndex===4"></joblog>
    <user v-if="tabIndex===5"></user>
    <cdc v-if="tabIndex===7"></cdc>
    <search v-if="tabIndex===8"></search>
  </div>
</template>
<style scoped>
</style>
